<template>
	<div class="container">
		<!-- 面包屑导航 -->
		<div class="breadcrumb">
			<el-breadcrumb separator="">
				<el-breadcrumb-item>
					<div class="div1">客户管理</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item v-if="navName == 1" :to="{ path: '/myCustomers' }">
					<div class="div3">我的客户</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item v-if="navName == 2" :to="{ path: '/assign_custom' }">
					<div class="div3">分配客户</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item v-if="navName == 3" :to="{ path: '/openCustomers' }">
					<div class="div3">公开客户</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/customerInformation',query:{id:this.$route.query.id,nav:1}}">
					<div class="div3">客户资料</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/myCustomers' }">
					<div class="div2">查看附件</div>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- <p class="tips"><span>上传说明</span>: 请点击上传图片或者上传视频后， 再点击确认提交才能够上传成功。</p> -->
		<!-- 面包屑导航  :auto-upload='false'-->
		<div class="uplod">
			<el-upload class="video" action="#" multiple :limit="3" :on-exceed="handleExceed" :before-upload="beforeUploadVideo"
			 :http-request="videoUpload" :show-file-list="false">
				<el-button type="primary" size='mini'>选择视频</el-button>
			</el-upload>
		</div>

		<div class="uplod">
			<!-- :limit="3" :on-exceed="handleExceed" -->
			<el-upload class="video" ref='upload' action="#" multiple :before-upload="beforeUploadImg" :http-request="imgUpload"
			 :show-file-list="false">
				<el-button type="primary" size='mini'>选择图片</el-button>
			</el-upload>
		</div>

		<div class="box">
			<div class="video">

				<div v-if='customerVideo' class="li" v-for='(itemsVideo,index) in customerVideo'>
					<video v-if="itemsVideo" v-bind:src="ImgHttps+itemsVideo.video" class="video-avatar" controls="controls">
						您的浏览器不支持视频播放
					</video>
					<p v-if="itemsVideo">{{(itemsVideo.creattime)}}</p>
					<p v-if="itemsVideo" class="close" @click="delectList(index)"><i class="el-icon-error"></i></p>
				</div>

				<div v-if="customerImage" class="liimg" v-for='(itemsImg,index) in customerImage'>
					<img v-if="itemsImg" :src='ImgHttps+itemsImg.img' class="img-avatar" v-image-preview />
					<p v-if="itemsImg">{{(itemsImg.creattime)}}</p>
					<!-- $moment -->
					<p v-if="itemsImg" class="close" @click="delectImgList(index)"><i class="el-icon-error"></i></p>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import * as imageConversion from 'image-conversion';

	export default {
		data() {
			return {
				navName: "",
				fileList: [],
				fileListImg: [],
				customerVideo: [],
				customerImage: [],
				length: 0,
			}
		},
		created() {
			this.navName = this.$route.query.navName;
			this.detailAxios();
		},
		methods: {
			// 详情
			detailAxios() {
				this.axios
					.get("/order/comm/customeruser/selectById?id=" + this.$route.query.id, {
						headers: {
							isLoading: false
						}
					})
					.then((res) => {
						if (res.code == 0) {
							if (res.data.customerVideo) {
								let videol = JSON.parse(res.data.customerVideo).filter(res => res != null);
								this.customerVideo = videol;
							}

							if (res.data.customerImage) {
								let img1 = JSON.parse(res.data.customerImage).filter(res => res != null);
								this.customerImage = img1;
							}
						} else {
							this.$message.error(res.message);
						}
					});
			},

			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			//上传前回调
			beforeUploadVideo(file) {
				var fileSize = file.size / 1024 / 1024 < 50;
				if (
					[
						"video/mp4",
						"video/ogg",
						"video/flv",
						"video/avi",
						"video/wmv",
						"video/rmvb",
						"video/mov",
					].indexOf(file.type) == -1
				) {
					this.$message.warning("请上传正确的视频格式");
					return false;
				}

				if (!fileSize) {
					this.$message.warning("视频大小不能超过50MB");
					return false;
				}

			},
			beforeUploadImg(file) {
				return new Promise((resolve, reject) => {
					let _URL = window.URL || window.webkitURL
					let isLt2M = file.size / 1024 / 1024 > 4 // 判定图片大小是否小于4MB
					// 这里需要计算出图片的长宽
					let img = new Image()
					img.onload = function() {
						file.width = img.width // 获取到width放在了file属性上
						file.height = img.height // 获取到height放在了file属性上
						let valid = img.width > 2000 // 图片宽度大于2000
						// console.log(11, file)
						// 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
						if (valid || isLt2M) {
							imageConversion.compressAccurately(file, {
								size: 400,
								width: 2000
							}).then(res => { // console.log(33, res)
								resolve(res)
							})
						} else resolve(file)
					} // 需要把图片赋值
					img.src = _URL.createObjectURL(file)
				})
			},

			videoUpload(fileObj) {
				let length = this.fileList.length + this.customerVideo.length + this.fileListImg.length + this.customerImage.length;
				let formData = new FormData();
				formData.append("file", fileObj.file);

				let config = {
					headers: {
						"Content-Type": "multipart/form-data",
					},
				};
				if (length <= 20) {
					this.axios
						.post(
							"/sys/v1/common/upload/files?pathName=internalSystem",
							formData,
							config
						)
						.then((res) => {
							console.log(res);
							if (res.code == 0) {
								// this.imageUrl = res.data.url;
								let obj = {
									video: res.data.url,
									creattime: new Date().toLocaleDateString(),
								};
								this.fileList.push(obj);
								this.submit();
							} else {
								this.$message.error(res.message);
							}
						});
				} else {
					this.$message.warning('视频图片条数不能超过20条')
				}

			},
			delect(index) {
				this.fileList.splice(index, 1);
			},
			delectList(index) {
				this.customerVideo.splice(index, 1);
				this.submit();
			},
			imgUpload(fileObj) {
				let length = this.fileList.length + this.customerVideo.length + this.fileListImg.length + this.customerImage.length;
				let formData = new FormData();
				formData.append("file", fileObj.file);

				let config = {
					headers: {
						"Content-Type": "multipart/form-data",
					},
				};
				if (length <= 20) {
					this.axios
						.post(
							"/sys/v1/common/upload/files?pathName=internalSystem",
							formData,
							config, {
								headers: {
									isLoading: false
								}
							}
						)
						.then((res) => {
							console.log(res);
							if (res.code == 0) {
								// this.imageUrl = res.data.url;
								let obj = {
									img: res.data.url,
									creattime: new Date().toLocaleDateString(),
								};
								this.fileListImg.push(obj);
								this.submit();
							} else {
								this.$message.error(res.message);
							}
						});
				} else {
					this.$message.warning('视频图片条数不能超过20条')
				}
			},
			delectImg(index) {
				this.fileListImg.splice(index, 1);
			},
			delectImgList(index) {
				this.customerImage.splice(index, 1);
				this.submit();
			},

			// 保存视频与图片
			submit: _.debounce(function() {
				// let length = this.fileList.length + this.customerVideo.length + this.fileListImg.length + this.customerImage.length;
				// if (length>0) {
				this.fileListImg.forEach((item, i) => {
					this.customerImage.push(this.fileListImg[i])
				})

				this.fileList.forEach((item, i) => {
					this.customerVideo.push(this.fileList[i])
				})

				this.axios.post("/order/comm/customeruser/update/image", {
					id: this.$route.query.id,
					customerImage: JSON.stringify(this.customerImage),
					customerVideo: JSON.stringify(this.customerVideo)
				}, {
					headers: {
						isLoading: false
					}
				}).then(res => {
					// console.log(res);
					this.fileList = [];
					this.fileListImg = [];

					if (res.code == 0) {
						// this.$message.success('上传成功');
						// this.$router.push({name:'customerInformation',query:{id:this.$route.query.id,nav:1}})
					} else {
						this.$message.error(res.message);
					}
				})
				// }else {
				// 	this.$message.warning('无视频/图片上传')
				// }
			}, 100),
		}
	}
</script>

<style scoped lang="scss">
	.div1 {
		margin-left: -16px;
		background: url(../../assets/breadcrumb2.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #2d7edf;
	}

	.div2 {
		margin-left: -16px;
		background: url(../../assets/breadcrumb1.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #fff;
	}

	.div3 {
		margin-left: -8px;
		background: url(../../assets/breadcrumb3.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #2d7edf;
	}

	.uplod {
		display: inline-block;
		margin-right: 20px;
	}

	.tips {
		text-shadow: 0 0 7px 2px #E49C2E;
		background-color: rgba(85, 170, 255, 0.3);
		border-radius: 5px;

		span {
			color: #006AF1;
			font-weight: 600;
		}

		font-size:14px;
		padding:8px;
	}

	.li {
		width: 210px;
		position: relative;
		display: inline-block;
		margin-right: 10px;

		p {
			text-align: center;
			font-size: 12px;
			color: #666;
		}

		.close {
			position: absolute;
			top: -10px;
			right: -10px;
			z-index: 10;
		}

		.close:hover {
			cursor: pointer;

			i {
				color: #006AF1;
			}
		}
	}

	.video {
		margin: 10px 0;
	}

	.video-avatar {
		width: 210px;
		display: inline-block;
	}

	.liimg {
		position: relative;
		display: inline-block;
		margin-right: 12px;
		width: 140px;

		p {
			text-align: center;
			font-size: 12px;
			color: #666;
		}

		.close {
			position: absolute;
			top: -10px;
			right: -10px;
			z-index: 10;
		}

		.close:hover {
			cursor: pointer;

			i {
				color: #006AF1;
			}
		}

		.img-avatar {
			width: 140px;
			height: 140px;
		}
	}
</style>
